<template>
  <main class="details-content">
    <header><van-icon name="arrow-left" @click="back" /> <span>我的收藏</span></header>
    <van-tabs v-model:active="state.active" @click-tab="onClickTab">
      <van-tab title="全部"></van-tab>
      <van-tab title="国家法规"></van-tab>
      <van-tab title="地方法规"></van-tab>
      <van-tab title="裁量基准"></van-tab>
      <van-tab title="违法行为"></van-tab>
    </van-tabs>
    <div class="content-list">
      <div v-for="item in state.list" :key="item.key">
        <h1>{{ item.n.name }}</h1>
        <div class="page-info">
          <span class="time">2024-01-24 12:00:00</span>
          <!-- <span style="color: rgb(117, 175, 255)" @click="collect">收藏</span> -->
        </div>
        <p>
          {{ item.n.type }}
        </p>
      </div>
    </div>

  </main>
</template>
<script setup>
import { collectQuery } from "@/api";

import { showNotify } from 'vant'
import { onMounted } from "vue";
const router = useRouter()

const state = reactive({
  active: 0,
  list: [],
  allList: []
})
const getCollectQuery = () => {
  collectQuery().then(res => {
    if (res.code == '0') {
      state.allList = res.data
      state.list = res.data
    }
  })
}
const back = () => {
  router.go(-1)
}
const onClickTab = (val) => {
  switch (val.name) {
    case 0:
      state.list = state.allList
      break;
    case 1:
      state.list = state.allList.filter(item => item.n.type == '法规')
      break;
    case 2:
      state.list = state.allList.filter(item => item.n.type == '法规')
      break;
    case 3:
      state.list = state.allList.filter(item => item.n.type == '裁量基准')
      break;
    case 4:
      state.list = state.allList.filter(item => item.n.type == '案件系统违法行为')
      break;
  }
}
const collect = () => {
  showNotify({ type: 'success', message: '收藏成功' })
}
onMounted(() => {
  getCollectQuery()
})
</script>
<style lang="scss" scoped>
.details-content {
  padding: 0 20px;

  header {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    height: 60px;

    span {
      display: flex;
      align-items: center;
      margin: auto;
    }
  }

  h1 {
    margin: 20px 0 0 0;
    font-size: 18px;
  }

  .page-info {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    color: #666;
  }

  p {
    color: #666;
  }

  .content-list {
    height: 85vh;
    overflow: auto;
  }
}
</style>
